<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%>

 <%
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath();
 %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
 		<link rel="stylesheet" type="text/css" href="<%=basePath %>/css/updateVideo.css" />
        <link rel="stylesheet" href="<%=basePath %>/css/list.css">
		<link href="<%=basePath %>/css/H-ui.min.css" rel="stylesheet" type="text/css" />
		<link href="<%=basePath %>/css/formsCSS.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath %>/css/easyui.css">
   		<link rel="stylesheet" type="text/css" href="<%=basePath %>/css/icon.css">
    	<link rel="stylesheet" type="text/css" href="<%=basePath %>/css/demo.css">
		<script src="<%=basePath %>/js/jquery.min.js"></script>
		<script src="<%=basePath %>/js/jquery.easyui.min.js"></script>
		<script src="<%=basePath%>/lib/My97DatePicker/WdatePicker.js"></script>
		<script src="<%=basePath %>/js/formsJS.js"></script>
		<script src="<%=basePath %>/js/jquery.form.js"></script>
		<style> 
		#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } 
		#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } 
		#percent { position:absolute; display:inline-block; top:3px; left:48%; } 
		</style> 
		<script type="text/javascript">
	  	function showRequest(formData, jqForm, options){
 		  
	  	  var videoFile = $("#videoFile").val();
 		  //校验是否为空
	  	  if(videoFile==""){
 			  $("#msg").html("请选择视频路径不能为空！"); 
			  return false;
		  } 
 		  //校验文件类型
 		  	var fileTp = videoFile.toString().substring(videoFile.toString().lastIndexOf(".")+1);
	 		if(fileTp != "mp4" && fileTp != "mp3"){
	 			alert("只能上传mp3/mp4格式的文件");
	 			return false;
	 		} 
	 		//校验文件大小
	 		var files=document.getElementById('videoFile');
 	         if(files.files[0].size > 1024*1024*1024*2){
	            alert("上传文件不能大于2G！请重新选择！");
	            return false;
	        } 
 	        //提交时，按钮隐藏
  	       $("#button1").hide();
 	       $("#button2").hide();
		   $("#msg").html("正在上传，请稍后..."); 
		  
			return true;
		}
		 
	 function showResponse(responseText, statusText)  {  
	 	//	$("#msg").html('文件上传成功！'); 
		     //提交成功重新加载页面
		    location.reload();
		    //提交时，按钮显示
		    $("#button1").show();
	 	    $("#button2").hide();

		 $('#p').progressbar('setValue',0.0);
		}  
		 
	  function uploadVideo(){
		  var options = {
				beforeSubmit: showRequest,//提交前验证
	            success: showResponse,//成功后执行
		    }
		  $('#dataForm').submit(function() {  
		        $(this).ajaxSubmit(options);  
		        timer=window.setInterval("getForm()",1000);    //每隔500毫秒获取一次上传进度
		        return false;  //如果是false，则表明是不跳转
		  });  
		   
	  }
	  var timer = null;  
	  function getForm(){
			var dataForm = new FormData(document.getElementById("dataForm"));
		     $.ajax({
		        url:"<%=basePath%>/courseChapter/uploadPercent",
		        type:"POST",//请求方式
		        cache: false,  
		        processData: false,  
		        contentType: false,  
		        data: dataForm, 
		        success:function(data){
		        	var value = $('#p').progressbar('getValue');
		        	// console.info(timer+"----"+value);
		            if(value == 100.0) {  
	                    window.clearTimeout(timer);  
	                }else {  
	                    $('#p').progressbar('setValue',data);
	                    timer = window.setTimeout("getForm()", 10);  
	                }  
		       },
		       //请求出错的处理
		       error:function(){
 		            window.clearInterval(timer);
		       }
		    });
		} 
/* 	 function document.oncontextmenu(){
		  event.returnValue=false;
	}   */
			 
	</script>
</head>
<body  oncontextmenu="return false" onselectstart="return false" >
		<div class="connect_wrap">
    		<h3 style= "text-align: center;">课程章节视频测试页面</h3>
			<div class="row cl" style="max-width:88%;margin-left:8%;">
			<div class="labelText"></div>
				<form  action="<%=basePath%>/courseChapter/uploadVideo" id="dataForm" method="post"
					   enctype="multipart/form-data">
					<div class="col-sm-4">
     						<div class="boxs"></div>
								<input type="hidden" name="id" id="id"  value="${courseChapter.id}">
								 <input type="text" name="chapterName" value="${courseChapter.chapterName}" readonly="readonly">
								<input type="file" class="inputBox" placeholder="上传视频" name="videoFile"  id="videoFile"
									value="${courseChapter.videoPath}">

 								<c:if test="${not empty courseChapter.videoPath}">
				                 	<video controls="controls"  preload="auto"  height="300" width="400" id="videoSource"
				                 	 poster="${WF_CONSOLE_CONFIG_OSS_URL}${courseChapter.imgPath}">
				                 		<source id="videoPath" src="${WF_CONSOLE_CONFIG_OSS_URL}${courseChapter.videoPath}" type="video/mp4"> 
				                 		<source id="videoPath" src="${WF_CONSOLE_CONFIG_OSS_URL}${courseChapter.videoPath}" type="video/ogg">
				                 		<source id="videoPath" src="${WF_CONSOLE_CONFIG_OSS_URL}${courseChapter.videoPath}" type="video/webM">
										 您的浏览器不支持html5!
				                 	 </video>
				                 	    
				                 </c:if>
				                
						   <div id="p" class="easyui-progressbar" style="width: 400px;"></div>  
						   <br>
						   <div class="row">
									<a  id="button1" class="btn btn-primary"  href="<%=basePath %>/courseChapter/chapterList" style="float: center;margin-left: 10px;">返回</a> 
									<input id="button2" class="btn btn-primary "  type="submit" value="上传"  style="float: center;"  onclick="uploadVideo()"  />
							</div>
					</div>
					<span style="color:red;" id="msg"></span>
				</form>
			</div>
	</div>
	
</body>
</html>